import React from 'react';
import { Button, Input, Select, Table, Form } from './basic';
import { 
  ComponentType, 
  ComponentCategory, 
  PropType, 
  type ComponentDefinition
} from '../types/component';

// 扩展组件定义类型，添加description属性
export interface ExtendedComponentDefinition extends ComponentDefinition {
  description?: string;
}

// 组件注册表
const componentRegistry: Record<string, ExtendedComponentDefinition> = {};

// 注册组件
export function registerComponent(component: ExtendedComponentDefinition): void {
  componentRegistry[component.type] = component;
}

// 批量注册组件
export function registerComponents(components: ExtendedComponentDefinition[]): void {
  components.forEach(registerComponent);
}

// 获取组件
export function getComponent(type: string): ExtendedComponentDefinition | undefined {
  return componentRegistry[type];
}

// 获取所有组件
export function getAllComponents(): ExtendedComponentDefinition[] {
  return Object.values(componentRegistry);
}

// 按分类获取组件
export function getComponentsByCategory(category: string): ExtendedComponentDefinition[] {
  return getAllComponents().filter(component => component.category === category);
}

// 注册基础组件
export function registerBasicComponents(): void {
  const basicComponents: ExtendedComponentDefinition[] = [
    {
      type: ComponentType.BUTTON,
      name: 'Button',
      title: '按钮',
      description: '用于触发操作的按钮',
      category: ComponentCategory.BASIC,
      properties: [
        { name: 'text', label: '文本', type: PropType.STRING, defaultValue: '按钮' },
        { 
          name: 'type', 
          label: '类型', 
          type: PropType.SELECT, 
          defaultValue: 'primary', 
          options: [
            { label: '主按钮', value: 'primary' },
            { label: '次按钮', value: 'default' },
            { label: '虚线按钮', value: 'dashed' },
            { label: '文本按钮', value: 'text' },
            { label: '链接按钮', value: 'link' }
          ]
        },
        { 
          name: 'size', 
          label: '大小', 
          type: PropType.SELECT, 
          defaultValue: 'middle', 
          options: [
            { label: '大', value: 'large' },
            { label: '中', value: 'middle' },
            { label: '小', value: 'small' }
          ]
        },
        { name: 'disabled', label: '禁用', type: PropType.BOOLEAN, defaultValue: false },
      ],
      defaultProps: {
        text: '按钮',
        type: 'primary',
        size: 'middle',
      },
      defaultLayout: {
        w: 4,
        h: 1,
        minW: 2,
        minH: 1
      },
      render: (props) => React.createElement(Button, props),
      preview: (props) => React.createElement(Button, { ...props, size: 'small' }),
    },
    {
      type: ComponentType.INPUT,
      name: 'Input',
      title: '输入框',
      description: '用于文本输入的表单控件',
      category: ComponentCategory.FORM,
      properties: [
        { name: 'label', label: '标签', type: PropType.STRING, defaultValue: '输入框' },
        { name: 'placeholder', label: '占位文本', type: PropType.STRING, defaultValue: '请输入' },
        { name: 'disabled', label: '禁用', type: PropType.BOOLEAN, defaultValue: false },
        { name: 'allowClear', label: '可清除', type: PropType.BOOLEAN, defaultValue: true },
      ],
      defaultProps: {
        label: '输入框',
        placeholder: '请输入',
        allowClear: true,
      },
      defaultLayout: {
        w: 6,
        h: 1,
        minW: 4,
        minH: 1
      },
      render: (props) => React.createElement(Input, props),
      preview: (props) => React.createElement(Input, { ...props, style: { width: '100%' } }),
    },
    {
      type: ComponentType.SELECT,
      name: 'Select',
      title: '选择器',
      description: '下拉选择框',
      category: ComponentCategory.FORM,
      properties: [
        { name: 'label', label: '标签', type: PropType.STRING, defaultValue: '选择器' },
        { name: 'placeholder', label: '占位文本', type: PropType.STRING, defaultValue: '请选择' },
        { 
          name: 'options', 
          label: '选项', 
          type: PropType.ARRAY, 
          defaultValue: [
            { label: '选项1', value: '1' },
            { label: '选项2', value: '2' },
          ]
        },
        { name: 'disabled', label: '禁用', type: PropType.BOOLEAN, defaultValue: false },
        { name: 'allowClear', label: '可清除', type: PropType.BOOLEAN, defaultValue: true },
      ],
      defaultProps: {
        label: '选择器',
        placeholder: '请选择',
        options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
        ],
        allowClear: true,
      },
      defaultLayout: {
        w: 6,
        h: 1,
        minW: 4,
        minH: 1
      },
      render: (props) => React.createElement(Select, props),
      preview: (props) => React.createElement(Select, { ...props, style: { width: '100%' } }),
    },
    {
      type: ComponentType.TABLE,
      name: 'Table',
      title: '表格',
      description: '用于展示结构化数据',
      category: ComponentCategory.DATA,
      properties: [
        { name: 'tableTitle', label: '表格标题', type: PropType.STRING, defaultValue: '数据表格' },
        { 
          name: 'columns', 
          label: '列配置', 
          type: PropType.ARRAY, 
          defaultValue: [
            { title: '姓名', dataIndex: 'name', key: 'name' },
            { title: '年龄', dataIndex: 'age', key: 'age' },
            { title: '地址', dataIndex: 'address', key: 'address' },
          ]
        },
        { 
          name: 'dataSource', 
          label: '数据源', 
          type: PropType.ARRAY, 
          defaultValue: [
            { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
            { key: '2', name: '李四', age: 42, address: '上海市浦东新区' },
          ]
        },
        { name: 'bordered', label: '边框', type: PropType.BOOLEAN, defaultValue: true },
        { name: 'pagination', label: '分页', type: PropType.BOOLEAN, defaultValue: true },
      ],
      defaultProps: {
        tableTitle: '数据表格',
        columns: [
          { title: '姓名', dataIndex: 'name', key: 'name' },
          { title: '年龄', dataIndex: 'age', key: 'age' },
          { title: '地址', dataIndex: 'address', key: 'address' },
        ],
        dataSource: [
          { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
          { key: '2', name: '李四', age: 42, address: '上海市浦东新区' },
        ],
        bordered: true,
        pagination: true,
      },
      defaultLayout: {
        w: 12,
        h: 4,
        minW: 6,
        minH: 2
      },
      render: (props) => React.createElement(Table, props),
      preview: (props) => React.createElement(Table, { ...props, pagination: false }),
    },
    {
      type: ComponentType.FORM,
      name: 'Form',
      title: '表单',
      description: '用于数据收集、校验和提交',
      category: ComponentCategory.FORM,
      properties: [
        { name: 'fields', label: '表单项', type: PropType.ARRAY, defaultValue: [] },
        { name: 'showSubmitButton', label: '显示提交按钮', type: PropType.BOOLEAN, defaultValue: true },
        { name: 'submitText', label: '提交按钮文本', type: PropType.STRING, defaultValue: '提交' },
        { name: 'showResetButton', label: '显示重置按钮', type: PropType.BOOLEAN, defaultValue: true },
        { name: 'resetText', label: '重置按钮文本', type: PropType.STRING, defaultValue: '重置' },
        { 
          name: 'layout', 
          label: '布局', 
          type: PropType.SELECT, 
          defaultValue: 'vertical', 
          options: [
            { label: '垂直', value: 'vertical' },
            { label: '水平', value: 'horizontal' },
            { label: '行内', value: 'inline' },
          ]
        },
      ],
      defaultProps: {
        fields: [],
        showSubmitButton: true,
        submitText: '提交',
        showResetButton: true,
        resetText: '重置',
        layout: 'vertical',
      },
      defaultLayout: {
        w: 12,
        h: 6,
        minW: 6,
        minH: 4
      },
      render: (props) => React.createElement(Form, props),
      preview: (props) => React.createElement(Form, { 
        ...props, 
        showSubmitButton: false, 
        showResetButton: false 
      }),
      allowedChildren: [
        ComponentType.INPUT,
        ComponentType.SELECT,
        ComponentType.CHECKBOX,
        ComponentType.RADIO,
        ComponentType.DATE_PICKER,
        ComponentType.BUTTON
      ],
    },
  ];

  registerComponents(basicComponents);
}

// 初始化注册所有组件
export function initializeComponentRegistry(): void {
  registerBasicComponents();
  // 在这里可以注册其他类型的组件
}

export default componentRegistry; 